<template>
	<view>
		<view class="nav-list">
			<u-tabs lineColor="#ff5502" :current="current" :list="navList" @click="navClick"></u-tabs>
		</view>
		<view class="order-list">
			<block v-if="List.length != 0">
				<view class="order-item" @tap="godetails(item.id)" v-for="(item,i) in List" :key="i"
					v-if="current != 4">
					<view class="order-header">
						<view class="order-no">
							{{ item.orn }}
						</view>
						<view class="order-status">
							<text v-if="item.status == 'wei'">未付款</text>
							<text v-if="item.status == 'guan'">已关闭</text>
							<text v-if="item.status == 'dai'">待发货</text>
							<text v-if="item.status == 'yi'">已发货</text>
							<text v-if="item.status == 'wan'">已完成</text>
						</view>
					</view>
					<block v-if="item.orderli != null">
						<view class="order-content" v-for="(list,index) in item.orderli" :key="index">
							<view class="content-left">
								<image :src="tool.img(list.guiimage)" mode="aspectFill"></image>
							</view>
							<view class="content-right">
								<view class="shop-name">
									{{ list.name }}
								</view>
								<view class="shop-details">
									<view class="shop-idcr">
										<view>{{ list.guiname }}</view>
										<view style="margin-top: 10rpx;display: flex;align-items: flex-end;"><text
												style="font-size: 22rpx;">￥</text>{{ list.price }}</view>
									</view>
									<view class="shop-num">
										x{{ list.num }}
									</view>
								</view>
							</view>
						</view>
						<view class="order-price">
							总金额：<text style="font-size: 24rpx;">￥</text>{{ item.price }}
						</view>
						<view class="order-btn" v-if="item.status != 'guan'">
							<!-- <view class="code o-btn" v-if="item.pei == 'ziti' && item.status == 'yi'">
								取件码
							</view> -->
							<view class="pay o-btn" v-if="item.status == 'wei'" @tap.stop="orderPay(item)">
								立即支付
							</view>
							<view class="pay o-btn" v-if="item.status == 'yi' && item.pei == 'kuai'"
								@tap="orderKuai(item)">
								查询快递
							</view>
							<view class="pay o-btn" v-if="item.status == 'yi' && item.pei == 'kuai'"
								@tap="takeGood(item)">
								确认收货
							</view>
							<view class="pay o-btn"
								v-if="item.status == 'yi' || item.status == 'dai' &&  item.pei == 'kuai'"
								@tap="tuiGood(item)">
								发起退款
							</view>
						</view>
					</block>
				</view>
				<view class="order-item" v-for="(item,i) in List" :key="i" v-if="current == 4">
					<view class="order-header">
						<view class="order-no">
							退款方式：<text v-if="item.type == 'jin'">仅退款</text><text v-else>退货退款</text>
						</view>
						<view class="order-status">
							<text v-if="item.status == 'shen'">审核中</text>
							<text v-if="item.status == 'wan'">已退款</text>
						</view>
					</view>
					<block v-if="item.zorders != null">
						<view class="order-content" v-if="" v-for="(list,index) in item.zorders.orderli" :key="index">
							<view class="content-left">
								<image :src="tool.img(list.guiimage)" mode="aspectFill"></image>
							</view>
							<view class="content-right">
								<view class="shop-name">
									{{ list.name }}
								</view>
								<view class="shop-details">
									<view class="shop-idcr">
										<view style="height: 70rpx;">{{ list.guiname }}</view>
										<view style="margin-top: 10rpx;display: flex;align-items: flex-end;"><text
												style="font-size: 22rpx;">￥</text>{{ list.price }}</view>
									</view>
									<view class="shop-num">
										x{{ list.num }}
									</view>
								</view>
							</view>
						</view>
					</block>
					<view class="order-btn" style="border: none;">
						<view class="pay o-btn" v-if="item.status == 'dai' && item.type == 'huo'" @tap="danGood(item)">
							填写单号
						</view>
					</view>
				</view>
			</block>
			<block v-else>
				<view class="empty">
					<image src="../../static/emptys.png" mode=""></image>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import tool from '@/utils/tool.js'
	export default {
		data() {
			return {
				current: 0,
				index: 0,
				tool: tool,
				navIndex: 0,
				page: 1,
				List: [],
				status: 'wei',
				navList: [ {
					name: '待发货',
					status: 'dai'
				}, {
					name: '已发货',
					status: 'yi'
				}, {
					name: '已完成',
					status: 'wan'
				}, {
					name: '退款',
					status: 'tui'
				}]
			}
		},
		onShow() {
			if (this.current != 3) {
				this.status = this.navList[this.current].status
				this.GetList()
			} else { //退款
				this.tuiList()
			}
		},
		onLoad(options) {
			this.current = options.index || 0
			console.log(this.current, '?')
			if (this.current != 3) {
				this.status = this.navList[this.current].status
				this.GetList()
			} else { //退款
				this.tuiList()
			}
		},
		onPullDownRefresh() {
			this.page = 1
			if (this.current != 3) {
				this.status = this.navList[this.current].status
				this.GetList()
			} else { //退款
				this.tuiList()
			}
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			this.page++
			if (this.current != 4) {
				this.status = this.navList[this.current].status
				this.GetList()
			} else { //退款
				this.tuiList()
			}
		},
		methods: {
			godetails(id) {
				uni.navigateTo({
					url: '/pages/order/order_details?id=' + id
				})
			},
			danGood(item) {
				uni.navigateTo({
					url: '/pages/refund/dan?order_id=' + item.id
				})
			},
			tuiList() {
				uni.showLoading({
					title: '正在加载'
				})
				this.$http.Post('uter/refundList', {
					page: this.page,
				}, (result) => {
					uni.hideLoading()
					if (this.page == 1) {
						this.List = []
					}
					this.List = this.List.concat(result.data.data)
					console.log(this.List, '???')
				})
			},
			tuiGood(item) { //发起退款
				console.log(item, '?')
				uni.navigateTo({
					url: '/pages/refund/index?order_id=' + item.id
				})

			},
			orderKuai(item) { //查询快递 
				uni.showLoading({
					title: '正在加载'
				})
				this.$http.Post('order/delivery', {
					order_id: item.id
				}, (result) => {
					uni.hideLoading()
					uni.showModal({
						title: '快递单号',
						content: result.data.kuandan,
						confirmText: '复制单号',
						success: (res) => {
							if (res.confirm) {
								// 将文本复制到剪贴板
								uni.setClipboardData({
									data: result.data.kuandan, // 需要复制的文本内容
									success(res) {
										console.log('复制成功');
									},
									fail(err) {
										console.error('复制失败', err);
									}
								});
							} else {

							}
						}
					})
				})
			},
			takeGood(item) { //快递收货
				uni.showModal({
					title: '确认收货',
					content: '是否确认收货',
					success: (res) => {
						if (res.confirm) {
							this.$http.Post('order/takeGood', {
								order_id: item.id
							}, (result) => {
								uni.showToast({
									title: '收货成功',
									icon: 'success'
								})
								setTimeout(res => {
									this.page = 1
									this.GetList()
								}, 500)
							})
						} else {

						}
					}
				})
			},
			orderPay(item) {
				uni.showLoading({
					title: '正在加载'
				})
				this.$http.Post('order/againOrderPay', {
					order_id: item.id,
				}, (result) => {
					uni.hideLoading()
					let paymentInfo = result.data
					uni.navigateTo({
						url: '/pages/buy/pay?url=' + paymentInfo.code_url + '&order_id=' + this.order_id
					})
					return
					uni.requestPayment({
						provider: "wxpay",
						timeStamp: paymentInfo.timeStamp,
						nonceStr: paymentInfo.nonceStr,
						package: paymentInfo.package,
						signType: paymentInfo.signType,
						paySign: paymentInfo.paySign,
						success(res) {
							uni.showToast({
								title: "支付成功"
							});
							setTimeout(res => {
								this.page = 1
								this.GetList()
							}, 300)
						},
						fail(err) {
							uni.showToast({
								title: "支付失败",
								icon: 'error'
							});
						},
					});
				})
			},
			GetList() {
				uni.showLoading({
					title: '正在加载'
				})
				this.$http.Post('order/orderList', {
					page: this.page,
					status: this.status
				}, (result) => {
					uni.hideLoading()
					if (this.page == 1) {
						this.List = []
					}
					this.List = this.List.concat(result.data.data)
				})
			},
			navClick(item) {
				this.current = item.index
				this.page = 1
				this.status = item.status
				if (item.index != 3) {
					this.GetList()
				} else {
					this.tuiList()
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #f7f7f7;
	}
</style>
<style>
	.nav-list {
		width: 100%;
		height: 100rpx;
		background-color: #fff;
	}

	.order-list {
		margin: 0rpx auto;
		width: 94%;
		height: 800rpx;
	}

	.order-item {
		margin: 20rpx auto;
		width: 100%;
		background-color: #fff;
		border-radius: 16rpx;
	}

	.order-header {
		padding: 25rpx 35rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		border-bottom: 1rpx solid #f4f4f4;
	}

	.order-no {
		color: #3c3c3c;
	}

	.order-status {
		color: #ccc;
	}

	.order-content {
		margin: 20rpx auto;
		width: 94%;
		display: flex;
		justify-content: space-between;
	}

	.content-left {
		width: 30%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.content-left>image {
		width: 180rpx;
		height: 180rpx;
		border-radius: 16rpx;
	}

	.content-right {
		width: 68%;
		height: 150rpx;
	}

	.shop-name {
		/* font-weight: bold; */
		font-size: 30rpx;
		/* 	white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis; */
	}

	.shop-details {
		width: 100%;
		display: flex;
		margin-top: 20rpx;
	}

	.shop-idcr {
		font-size: 28rpx;
		color: #ccc;
		width: 80%;
	}

	.shop-num {
		width: 20%;
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
		color: #ccc;
	}

	.order-price {
		width: 94%;
		margin: 20rpx auto;
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
		padding: 20rpx 0;
		color: #3c3c3c;
		font-weight: bold;
	}

	.order-btn {
		width: 94%;
		margin: 20rpx auto;
		display: flex;
		justify-content: flex-end;
		padding: 20rpx 0;
		border-top: 1rpx solid #f4f4f4;
		color: #3c3c3c;
	}

	.code {
		font-size: 26rpx;
		border: 1rpx solid #ccc;
		padding: 10rpx 35rpx;
		border-radius: 999rpx;
	}

	.pay {
		font-size: 26rpx;
		border: 1rpx solid #ccc;
		padding: 10rpx 35rpx;
		border-radius: 999rpx;
	}

	.o-btn {
		margin-left: 20rpx;
	}

	.empty {
		width: 100%;
		height: 400rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.empty>image {
		width: 550rpx;
		height: 500rpx;
	}
	

</style>
